<%--
  Created by IntelliJ IDEA.
  User: H64
  Date: 2021/4/27
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>AjaxDemo</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="static/plugins/Hplus-v.4.1.0/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/animate.css" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/style.css?v=4.1.0" rel="stylesheet">

<!-- 全局js -->
<script src="static/plugins/Hplus-v.4.1.0/js/jquery.min.js?v=2.1.4"></script>
<script src="static/plugins/Hplus-v.4.1.0/js/bootstrap.min.js?v=3.3.6"></script>

<script type="text/javascript">
    // 客户端端浏览器验证
    //通过验证，返回true，如果没有通过验证返回false
    function  doAjax() {
        $.ajax({
            type: "POST", // 请求方式
            url: "ajaxdemo", // 请求的服务器路径
            data: "userName=admin&userAddress=天津", // post请求的数据参数
            datatype: "json", // 服务器响应的内容类型
            success: function (data) { // ajax请求成功时的回调函数
                // 这里是进行ajax业务逻辑处理的地方
                // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                $("#ajaxdemo-label").html(data);
            },
            error: function () {
                // ajax请求发生非错误时的回调函数
            }
        });
    }

        function doAjax2(){
            $.ajax({
                    type: "POST", // 请求方式
                    url: "ajaxdemo2", // 请求的服务器路径
                    data: "userName=admin&userAddress=天津", // post请求的数据参数
                    datatype: "json", // 服务器响应的内容类型
                    success: function (data) { // ajax请求成功时的回调函数
                        // 这里是进行ajax业务逻辑处理的地方
                        console.log("ajax data:");
                        console.log(data);
                        // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                        $("#ajaxdemo-label").html(JSON.stringify(data));
                    },
                    error: function () {
                        // ajax请求发生非错误时的回调函数
                },
            });
    }
</script>
<body>
<div class="ibox-content">
    <form class="form-horizontal">
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <label class="col-sm-2 control-label">ajaxdemo：</label>

            <div class="col-sm-2">
                <span class="help-block m-b-none" id="ajaxdemo-label" style="color: red"></span>
            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-primary" type="button" onclick="doAjax()">ajaxDemo1</button>
                <%--                <button class="btn btn-white" type="submit">取消</button>--%>
            </div>
            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-primary" type="button" onclick="doAjax2()">ajaxDemo2</button>
                <%--                <button class="btn btn-white" type="submit">取消</button>--%>
            </div>
        </div>
    </form>
</div>
</body>
</html>
